<template>
	<view class="container butler-index-container">
		<view class="page-filter">
			<view class="filter-list filter-sel">我的医生</view>
			<view class="filter-list">已过期</view>
		</view>
		<view class="page-main">
			<view class="page-list" @click="jump('/pagesChat/butler/worker')">
				<image class="list-head" :src="$fileUrl+'pop.png'" mode="aspectFill"></image>
				<view class="list-right">
					<view class="list-top">
						<view class="list-name">AI健康管家</view>
					</view>
					<view class="list-tips">
						您好我是您的专属健康管家，请与我对话吧
						<text class="iconfont" style="color: #3AD3C1;font-size: 26rpx;">&#xe775;</text>
					</view>
				</view>
			</view>
			<view class="page-list" v-for="item in doctorList" :key="item.id">
				<image class="list-head" :src="item.headPortrait" @error="$handleImageError(item,'headPortrait')" mode="aspectFill"></image>
				<!-- <view class="list-status">剩余:29天</view> -->
				<view class="list-right">
					<view class="list-top">
						<view class="list-name">{{item.name}}</view>
						<view class="top-tips">{{item.job}}</view>
						<view class="top-tips">{{item.stairOfficesDirector}}/{{item.twoOfficesDirector}}</view>
					</view>
					<view class="list-addr">{{item.placeStoreName}}</view>
					<view class="list-tips">擅长：
						<text v-for="adept in item.adeptIllnessArr" :key="adept.id">{{adept.name}}、</text>
					</view>
					<view class="list-bottom">
						<view class="list-price">

						</view>
						<view class="yuan-btn btn-primary">立即联系</view>
					</view>
				</view>

			</view>
			<!-- <view class="page-list">
				<image class="list-head" :src="$fileUrl+'head.png'" mode="aspectFill"></image>
				<view class="list-status danger-status">已过期</view>
				<view class="list-right">
					<view class="list-top">
						<view class="list-name">李海燕</view>
						<view class="top-tips">主治医师</view>
						<view class="top-tips">中医内科</view>
					</view>
					<view class="list-addr">成都锦弘健康中医馆</view>
					<view class="list-tips">擅长：中医养生、良恶性肿瘤、中医体质调养、心脑管疾病、中西医结合科其他疾病、糖尿…</view>
					<view class="list-bottom">
						<view class="list-price">
							<text>￥</text>
							<text class="list-price-num">1000</text>
							<text>/30天</text>
						</view>
						<view class="yuan-btn btn-primary">立即联系</view>
					</view>
				</view>

			</view> -->

			<view class="not-more" v-if="isLoading">加载中...</view>
			<view class="null-page" v-else-if="doctorList.length<=0 ">
				<text class="iconfont">&#xe642;</text>
				<view class="null-page-tips">暂无数据~</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app"
	import { hideLoading, showLoading } from '../../common/util';
	import userApi from '../../common/userApi';

	const notMore = ref(true)
	const pageSize = 10
	let pageNum = 1
	const jump = (url) => {
		uni.navigateTo({ url })
	}

	onMounted(async () => {
		await getPageList()
	})
	const isLoading = ref(false)
	const doctorList = ref([])
	const getPageList = async () => {
		showLoading()
		isLoading.value = true
		try {
			const res = await userApi.findMyDoctor()
			const arr=res.data.map((item)=>{
				return {
					...item,
					adeptIllnessArr:JSON.parse(item.adeptIllness)
				}
			})
			doctorList.value = arr
			isLoading.value = false
		} finally {
			hideLoading()
		}
	}
	const loadMore = () => {
		if (isLoading.value) return
		if (notMore.value) return
		pageNum = pageNum + 1
		getPageList()
	}
	const refreshList = () => {
		notMore.value = false
		pageNum = 1
		doctorList.value = []
		getPageList()
	}
	onReachBottom(() => {
		loadMore()
	})
	onPullDownRefresh(() => {
		refreshList()
		uni.stopPullDownRefresh()
	})
</script>

<style lang="scss">
	.butler-index-container {
		background: linear-gradient(180deg, #DAFBFB 0%, #D7E5FF 8%, #F2F3F8 40%, #F2F3F8 100%);

		padding-bottom: 120rpx;

		.page-filter {}

		.filter-list {
			display: inline-block;
			width: 50%;
			font-size: 30rpx;
			color: #6D6D6D;
			font-weight: bold;
			text-align: center;
			height: 88rpx;
			line-height: 88rpx;
			position: relative;
			background-color: #F5F6FA;
		}

		.filter-sel {
			color: #080808;
			background-color: #fff;

			&::after {
				content: '';
				width: 74rpx;
				height: 6rpx;
				background-color: #3AD3C1;
				position: absolute;
				left: -999rpx;
				right: -999rpx;
				margin: auto;
				bottom: 0;
				border-radius: 10rpx;
			}
		}

		.page-main {
			padding: 25rpx;
		}

		.page-list {
			background-color: #fff;
			border-radius: 10rpx;
			display: flex;
			margin-bottom: 20rpx;
			padding: 30rpx 25rpx;
			position: relative;
		}

		.list-status {
			position: absolute;
			right: 0;
			top: 0;
			border-radius: 10rpx;
			background-color: rgba(253, 211, 60, 0.2);
			padding: 10rpx 20rpx;
			font-size: 22rpx;
			color: #AC8E23;
		}

		.danger-status {
			background-color: rgba(249, 70, 60, 0.2);
			color: #F9463C;
		}

		.list-head {
			width: 140rpx;
			height: 140rpx;
			flex-shrink: 0;
			margin-right: 20rpx;
		}
		.list-right{
			flex-grow: 1;
		}

		.list-top {
			display: flex;
			align-items: center;
		}

		.list-name {
			font-size: 32rpx;
			color: #202020;
			font-weight: bold;
		}

		.top-tips {
			font-size: 24rpx;
			color: #383838;
			margin-left: 20rpx;

		}

		.list-addr {
			font-size: 28rpx;
			color: #383838;
			margin-top: 10rpx;
		}

		.list-tips {
			font-size: 24rpx;
			color: #6D6D6D;
			margin-top: 10rpx;
			line-height: 40rpx;
		}

		.list-bottom {
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.yuan-btn {
				display: inline-flex;
				width: 200rpx;
				height: 60rpx;
				border-radius: 60rpx;
				font-size: 24rpx;
			}
		}

		.list-price {
			color: #FF8815;
			font-size: 24rpx;
		}

		.list-price-num {
			font-size: 28rpx;
			font-weight: bold;
		}
	}
</style>